<template>
  <div>
    <el-dialog
      :title="修改密码"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="30%"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="140px"
        @keyup.enter.native="dataFormSubmit()"
      >
        <el-form-item label="原密码" prop="userPwd">
          <el-input :type="pwdType1" v-model="dataForm.userPwd" ></el-input>
          <span class="show-pwd" @click="showPwd1">
            <svg-icon icon-class="eye" />
          </span>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input :type="pwdType2" v-model="dataForm.newPwd" ></el-input>
          <span class="show-pwd" @click="showPwd2">
            <svg-icon icon-class="eye" />
          </span>
        </el-form-item>
        <el-form-item label="再次输入新密码" prop="newPwd1">
          <el-input :type="pwdType3" v-model="dataForm.newPwd1" ></el-input>
          <span class="show-pwd" @click="showPwd3">
            <svg-icon icon-class="eye" />
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import user from '@/api/user'
import md5 from 'js-md5'
// import myUtils from '../../api/myUtils'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.dataForm.newPwd1 !== '') {
          this.$refs.dataForm.validateField('newPwd1');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.dataForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validateComplexity = (rule, value, callback) => {
      if (value === '') {
        // 如果为空，让 required 规则去处理，这里直接通过
        callback();
      } else {
        // 正则表达式：至少包含一个大写字母、一个小写字母和一个数字
        const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,16}$/;

        if (!reg.test(value)) {
          callback(new Error('密码必须包含大小写字母和数字，长度6-16位'));
        } else {
          callback();
        }
      }
    };

    return {
      visible:false,
      pwdType1: 'password',
      pwdType2: 'password',
      pwdType3: 'password',
      dataRule:{
        userPwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        newPwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          // { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: validateComplexity, trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPwd1:[
          { required: true, message: "密码不能为空", trigger: "blur" },
          // { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: validateComplexity, trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      dataForm:{
        id:0,
      }
    }
  },
  methods:{
    init()
    {
      this.dataForm = {};
      this.visible = true;
      this.$refs["dataForm"].resetFields();
    },
    showPwd1() {
      if (this.pwdType1 === 'password') {
        this.pwdType1 = ''
      } else {
        this.pwdType1 = 'password'
      }
    },
    showPwd2() {
      if (this.pwdType2 === 'password') {
        this.pwdType2 = ''
      } else {
        this.pwdType2 = 'password'
      }
    },
    showPwd3() {
      if (this.pwdType3 === 'password') {
        this.pwdType3 = ''
      } else {
        this.pwdType3 = 'password'
      }
    },
    dataFormSubmit()
    {
      this.$refs["dataForm"].validate(valid => {
        if(valid)
        {
          this.dataForm.userNum = this.$store.getters.name
          console.log(this.$store.getters.name)
          console.log('改密码呢')
          console.log(this.dataForm)
          user.changePassword(this.dataForm.userNum,md5(this.dataForm.userPwd),md5(this.dataForm.newPwd)).then(({ code }) => {
            if (code  === '000000') {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 700,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                  this.$router.push({path:`/login`});
                }

              });
            } else {
              this.$message.error("操作失败");
            }
          });
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
</style>
